<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>SportCard</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height:100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: gray;
			z-index: -1000;
		}
		.content{
			width: 18.75rem;
			height: 31.25rem;
			perspective: 2000px;
			transform-style: preserve-3d;
			user-select: none;
		}
		.content .card{
			position: relative;
			padding-top: 1px;
			width: 100%;
			height: 100%;
			transition: all 0.5s ease-in-out;
			transform-style: preserve-3d;
			user-select: none;
		}
		.content .card .img{
			position: absolute;
			z-index: -10;
			width: 100%;
			height:100%;
			filter: grayscale(50%);
		}
		.content .card h1{
			margin-top: 20%;
			color: white;
			text-align: center;
			letter-spacing: 10px;
			text-transform: uppercase;
			transition: all 0.5s ease-in-out;
		}
		.content .card h2{
			text-align: center;
			margin-top: 10%;
			color: white;
			text-transform: uppercase;
			letter-spacing: 5px;
			transition: all 0.5s ease-in-out;
		}
		.content .card .barList{
			width: 100%;
			margin-top: 20%;
			transition: all 0.5s ease-in-out;
			transform-style: preserve-3d;
			transform: rotateZ(-90deg) translateX(40%);
		}
		.content .card .barList .bar{
			position: relative;
			width: 0%;
			height: 0.625rem;
			background-color: white;
			transform-style: preserve-3d;
			transition: all ease-in-out 0.5s;
			margin-top: 10%;
			transform-origin: left;
		}
		.content .card .barList .bar span{
			position: absolute;
			top: -60%;
			transform: scale(0.5);
			display: none;
		}
		.content .card .barList .bar::after{
			position: absolute;
			transform-origin: top;
			content: '';
			width: 100%;
			height:100%;
			background-color: #00008B;
			top: 100%;
			transform: rotateX(90deg) translateY(-100%);
		}
		.content .card .barList .bar::before{
			position: absolute;
			content: '';
			transform-origin: left;
			left: 100%;
			width: 0.625rem;
			height: 0.625rem;
			background-color: green;
			transform: rotateY(-90deg) translateX(-0.625rem);
		}
		/* 开始变化 */
		.active .card{
			transform: rotateX(60deg) translateY(100px);
			transform-style: preserve-3d;
			user-select: none;
		}
		.active .card .img {
			filter: grayscale(80%);
		}
		.active .card h1{
			opacity: 0;
			margin-top: -20%;
		}
		.active .card h2{
			transform: rotateX(-95deg) translateY(-50px) translateZ(110px);
			font-size: 40px;
			color: #F5DEB3;
			text-shadow: 0 0 15px white;
		}
		.active .card .barList .bar span{
			display: block;
		}
		.active .card .barList .bar{
			background-color: white;
			transform: rotateY(-90deg) rotateX(45deg);
		}
		.active .card .barList .bar:nth-child(1){
			width: 20%;
		}
		.active .card .barList .bar:nth-child(2){
			width: 60%;
		}
		.active .card .barList .bar:nth-child(3){
			width: 40%;
		}
		.active .card .barList .bar:nth-child(4){
			width: 30%;
		}
		.active .card .barList .bar:nth-child(5){
			width: 60%;
		}
		.active .card .barList .bar:nth-child(6){
			width: 50%;
		}
		.active .card .barList .bar:nth-child(7){
			width: 40%;
		}
	</style>
</head>
<body>
	<div class="content" id="content">
		<div class="card">
			<img src="./img/sports.jpg" alt="运动" class="img">
			<h1>Sport</h1>
			<div class="barList">
				<div class="bar">
					<span>1,000</span>
				</div>
				<div class="bar">
					<span>1,000</span>
				</div>
				<div class="bar">
					<span>1,000</span>
				</div>
				<div class="bar">
					<span>1,000</span>
				</div>
				<div class="bar">
					<span>1,000</span>
				</div>
				<div class="bar">
					<span>1,000</span>
				</div>
				<div class="bar">
					<span>1,000</span>
				</div>
			</div>
			<h2>step:2000</h2>
		</div>
	</div>
	<script type="text/javascript">
		let card = document.getElementById('content')
		card.addEventListener('click',()=>{
			card.classList.toggle('active')
		})
	</script>
</body>
</html>